<template>
  <div>
    <!-- 对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="40%"
      center
      :close-on-click-modal="false">
      <el-form :model="msgForm"  ref="MsgForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="学生学号" prop="stuId" required>
          <el-input v-model="msgForm.stuId" clearable></el-input>
        </el-form-item>        
        <el-form-item label="学生姓名" prop="stuName" required>
          <el-input v-model="msgForm.stuName" clearable></el-input>
        </el-form-item>
        <el-form-item label="学生年龄" prop="stuAge" required>
          <el-input v-model="msgForm.stuAge"></el-input>
        </el-form-item>
        <el-form-item label="学生成绩" prop="claScore" required>
          <el-input v-model="msgForm.claScore"></el-input>
        </el-form-item>
        <el-form-item style="margin: 0 auto;">
          <el-button type="primary" @click="save" plain>确定</el-button>
          <el-button type="warning" @click="resetForm('MsgForm')" plain >重置</el-button>
          <el-button @click="dialogVisible = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name:'myDialog',
  props:{
    dialogTitle:{
        type:String,
        default:'标题'
    },
    dialogVisible:{
        type:Boolean,
        default:false
    },
    msgForm:{
        type:Object,
        default:{
            stuId:'',
            stuName:'',
            stuAge:0,
            calScore:0
        }
    },

  },
  data () {
    return {}
  },
  created(){},
  mounted(){},
  watch: {
    dialogVisible(newValue) {
      if (newValue) {
        this.$nextTick(() => {
          this.updateStudent();
        });
      }
    },
  },
  methods:{
      updateStudent(){
      },
      save(){
        let flag=0;
        if (this.dialogTitle == "添加学生信息") {
          flag=1;
        }else if(this.dialogTitle == "修改学生信息"){
          flag=2;
        }
        let result={
          msg:this.msgForm,
          flag:flag
        }
        this.dialogVisible=false;
        this.$emit("formChange",result)
      },
      //重置表单
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
  }
}
</script>

<style  scoped>

</style>
